<template>
	<view class="container">
		<view class="mask" v-show="popupDiskFlag || popupBluetoothFlag||popupPresetsFlag" @click="maskClick()">
		</view>
		<view class="popup" v-show="popupDiskFlag">
			<view class="title">
				U盘歌曲列表
			</view>
			<view class="songList">
				<view class="" v-for="(item,index) in usongList" :key="index" @click="songClick()">
					心太软
				</view>
			</view>
		</view>
		<view class="popupBluetooth" v-show="popupBluetoothFlag">
			<view class="title">
				蓝牙连接
			</view>
			<view class="BluetoothList">
				<view class="" v-for="(item,index) in deviceList" :key="index"  @click="createBLEConnection(item.deviceId)">
					<view class="icon">
						<img src="../../static/images/check.png" alt="" v-if="Connecting"/>
						<img src="../../static/images/loader.png" alt="" v-if="discovering"/>
					</view>
					<view class="">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="popupPresets" v-show="popupPresetsFlag">
			<view class="title">
				通道列表
			</view>
			<view class="PresetsList">
				<view class="" v-for="(item,index) in presetList" :key="index" @click="presetsClick(index)">
					<view class="">
						{{item.name}}
					</view>
					<img src="../../static/images/pause.png" alt=""  v-if="item.status==1"/>
					<img src="../../static/images/playSmall.png" alt=""  v-else/>
				</view>
			</view>
		</view>
		<view class="left_box">
			<view class="top">
				<view>
					<uni-data-select
					  v-model="value"
					  :localdata="range"
					  @change="changeMode"
					></uni-data-select>
				</view>
				<view class="circle" @click="clickBluetooth">
					<img src="../../static/images/Bluetooth.png" alt="" />
					<view :style="{'background-color':deviceList.length>0?'green':'red'}"></view>
				</view>
			</view>
			<view class="middle">
				<view class="mode" :style="{'padding-top':value==1?'15rpx':'5rpx'}">
					<view class="item" v-for="(item,index) in modeList" :key="index" @click="itemChecked(index,item.num)" 
					:style="{ 'border': checkedIndex == index ? 1 + 'rpx solid #00FFFF' :1 + 'rpx solid #222222','height':value==1?'78rpx':'65rpx'}">
						<img :src="item.src" alt="" />
						<view>
							{{item.text}}
						</view>
						<view>
							{{item.num}}
						</view>
					</view>
				</view>
				<view class="adjust" v-if="value==1">
					<view class="">
						<!-- :animation="animationData[index]"   :class="[item.changeBig?'bigSacle':'smallSacle']"-->
						<view class="list" v-for="(item,index) in adjustList" :key="index">
							<view class="images"  @touchmove="imageMove($event,index,1)"  @touchend="touchEnd($event,index,1)" @touchstart="touchStart($event,index,1)">
								<view  :style="{transform: 'rotate(' + item +'deg)'}" :animation="animationData[index]">
									<img src="../../static/images/Group.png" alt=""  :id="'images_'+Number(index+index)"/>
								</view>
								<view :style="{transform: 'rotate(' + item +'deg)'}" :animation="animationData[index]">
									<img src="../../static/images/Exclude.png" alt="" :id="'images_'+Number(index+index+1)"/>
								</view>
							</view>
							<view>
								{{item.text}}
							</view>
						</view>
					</view>
					<view class="">
						<view>
							<button @click="sava">保存</button>
							<button @click="reset">重置</button>
							<button @click="clickPresets">预设</button>
						</view>
					</view>
					<!-- showValue -->
					<view class="">
						<u-slider v-model="schedule"  step="0.1" min="0" :max="mp3Total"  activeColor="#00FCFF" block-size="8" block-color="#00FCFF" inactiveColor="#999" @changing="sliderChange"></u-slider>
					</view>
				</view>
				<view class="slider-container" v-else>
					<view class="" v-for="(item,index) in sliderList" :key="index">
						<view class="" style="height: 21rpx;">
							{{item.intervalValue}}
						</view>
						<s-slider v-model="item.intervalValue" :activeColor="item.bgcolor" :min="0" :max="100" :step="1" sizeUnit="rpx" @changing="changing" @changed="changed" style="margin: 5rpx 0 10rpx 0;"/>
						<view class="" :style="{'color':item.bgcolor=='red'?item.bgcolor:'#6D7884'}">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view @click="popupDisk"></view>
				<view>
					<img src="../../static/images/skip_forward.png" alt="" @click="shang"/>
					<view class="" @click="ztandbf">
						<img src="../../static/images/pauseBig.png" alt="" v-if="playFlag"/>
						<img src="../../static/images/play.png" alt="" style="margin-left: 4rpx;" v-else/>
					</view>
					<img src="../../static/images/skip_forwardRight.png" alt="" @click="xia"/>	
				</view>
				<view>
					<view class="">
						<view>
							{{chName}}
						</view>
						<view>
							音量
						</view>
					</view>
					<view class="">
						80%
					</view>
					<img src="../../static/images/battery.png" alt="" />
				</view>
			</view>
		</view>
		<view class="right_box">
			<view class="">
				<view class="list" v-for="(item,index) in soundRegulationList" :key="index">
					<view class="images"   @touchmove="imageMove($event,index,2)"  @touchend="touchEnd($event,index,2)" @touchstart="touchStart($event,index,2)">
						<view :style="{transform: 'rotate(' + item +'deg)'}"  :animation="soundanimationData[index]">
							<img src="../../static/images/Group.png" alt="" :id="'imagess_'+Number(index+index)"/>
						</view>
						<view :style="{transform: 'rotate(' + item +'deg)'}"  :animation="soundanimationData[index]">
							<img src="../../static/images/Exclude.png" alt="" :id="'imagess_'+Number(index+index+1)"/>
						</view>
					</view>
					<view>
						{{item.text}}
					</view>
				</view>
			</view>
			<view class="">
				<view class="">
					<switch :checked="muteChecked" @change="muteChange" style="transform:scale(0.5)" color="#0294FB"/> 静音
				</view>
				<view class="">
					<switch :checked="wirelessMChecked" @change="wirelessMChange" style="transform:scale(0.5)" color="#0294FB"/> 无线麦克风
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Frame from "@/static/images/Frame.png"
	import guitar from "@/static/images/guitar.png"
	import electricBass from "@/static/images/electricBass.png"
	import electronicDrum from "@/static/images/electronicDrum.png"
	import guitar_dian from "@/static/images/guitar_dian.png"
	import keyboard from "@/static/images/keyboard.png"
    import sSlider from "@/components/simple-slider/simple-slider.vue" //引入滑动进度条
	export default {
		components: {
			sSlider
		},
		data() {
			return {
			  discovering: false, //蓝牙是否处于搜索状态
			  deviceList: [], //设备列表 
			  deviceId: '', //已连接的蓝牙设备
			  Connecting: false, // 蓝牙连接状态
			  serviceUUID: '', //蓝牙服务的UUID
			  writeUUid: '', //写入UUID
			  notifyUUid: '', //广播UUID
			  writeBleOriginalValue: [85, 176, 0],
			  soundanimationData:[],
			  mp3Total: '',
			  schedule:'',
			  sliderValue: 30,
			  pointB:{},
			  animationData:[],
			  direct:null,
			  animation: null,
			  animationFlag:0,
			  sliderList:[{
				intervalValue:0,
				name:'CH1',
				bgcolor:'#00FFFF'
			  },{
				intervalValue:0,
				name:'CH2',
				bgcolor:'#00FFFF'
			  },{
				intervalValue:0,
				name:'CH3',
				bgcolor:'#00FFFF'
			  },{
				intervalValue:0,
				name:'CH4',
				bgcolor:'#00FFFF'
			  },{
				intervalValue:0,
				name:'CH5',
				bgcolor:'red'
			  },{
				intervalValue:0,
				name:'CH6',
				bgcolor:'#00FFFF'
			  },{
				intervalValue:0,
				name:'CH7',
				bgcolor:'#00FFFF'
			  }],
			  musicValue:30,
			  checkedIndex:0,
			  popupDiskFlag:false,
			  popupBluetoothFlag:false,
			  popupPresetsFlag:false,
			  muteChecked:true,
			  wirelessMChecked:false,
			  chName:'CH1',
			  soundRegulationList:[{
				  text:'总音量',
				  num:0,
			  },{
				  text:'内入音量',
				  num:1,
			  },{
				  text:'输入音量',
				  num:2,
			  },{
				  text:'耳机音量',
				  num:3,
			  }],
			  usongList:[],
			  value: 1,
			  animationIndex:null,
			  range: [
				{ value: 0, text: "混音模式" },
				{ value: 1, text: "通道模式" },
			  ],
			  adjustList:[{
				num:0,
				text:"音量",
			  },{
				num:0,
				text:"低音"
			  },{
				num:0,
				text:"中音"
			  },{
				num:0,
				text:"高音"
			  },{
				num:0,
				text:"混响"
			  },{
				num:0,
				text:"合唱"
			  },{
				num:0,
				text:"延时"
			  }],
			  modeList:[{
				  src:Frame,
				  text:"麦克风",
				  num:"CH1"
			  },{
				  src:Frame,
				  text:"麦克风",
				  num:"CH2"
			  },{
				  src:guitar,
				  text:"木吉他",
				  num:"CH3"
			  },{
				  src:guitar_dian,
				  text:"电吉他",
				  num:"CH4"
			  },{
				  src:electricBass,
				  text:"电贝司",
				  num:"CH5"
			  },{
				  src:electronicDrum,
				  text:"电子鼓",
				  num:"CH6"
			  },{
				  src:keyboard,
				  text:"键盘",
				  num:"CH7"
			  }],
			  presetList:[{
				  name:'男生1',
				  status:0
			  },{
				  name:'男生2',
				  status:0
			  },{
				  name:'女生1',
				  status:0
			  },{
				  name:'女生2',
				  status:0
			  }],
			  playFlag:false
			};
		},
		onLoad() {
			//监听蓝牙是否搜索
			uni.onBluetoothAdapterStateChange((res) => {
				console.log("蓝牙" + (res.discovering ? "开启" : "关闭") + "搜索")
				this.discovering = res.discovering;
			})
			//监听扫描到的蓝牙设备
			uni.onBluetoothDeviceFound(resd => {
				const devices = resd.devices[0];
				this.deviceList.push(devices)
				console.log(devices);
			})
			this.onBLEConnectionStateChange();
			this.seachDevice()
			// this.onBLECharacteristicValueChange()
		},
		onUnload() {
			if (this.discovering) {
				this.stopBluetoothDevicesDiscovery();
			}
			if (this.Connecting) {
				this.closeBLEConnect(this.deviceId);
			}
		},
		methods:{
			// 进度条更改事件
			sliderChange(e){
				// this.schedule = e 
			},
			transromImage(num){
				if(num == 1){
					return 'rotateOne'
				}else if(num == 2){
					return 'rotateTwo'
				}else if(num == 3){
					return 'rotateThree'
				}else if(num == 4){
					return 'rotateFive'
				}else if(num == 0){
					return 'rotateO'
				}
			},
			//mask弹窗层控制
			maskClick(){
				this.popupBluetoothFlag = false
				this.popupDiskFlag= false
				this.popupPresetsFlag= false
			},
			// U盘歌曲点击事件
			songClick(){
				
			},
			// 预设通道点击事件
			presetsClick(index){
				this.presetList[index].status = !this.presetList[index].status
			},
			// 滑动更改事件
			changing(e) {
				// console.log('changing', e);
			},
			// 滑动条结束事件
			changed(e) {
				// console.log('changed', e);
			},
			// 混音/通道切换
			changeMode(e) {
			  console.log("e:", e);
			  this.value=e
			  this.animationData = []
			  this.soundanimationData=[]
			  this.$forceUpdate()
			},
			// 麦克风/吉他调节切换
			itemChecked(e,name){
				console.log(e)
				this.checkedIndex=e
				this.chName= name
			},
			// 控制U盘歌曲弹出层
			popupDisk(){
				this.popupDiskFlag=!this.popupDiskFlag
			},
			// 控制蓝牙设备弹出层
			clickBluetooth(){
				this.popupBluetoothFlag=!this.popupBluetoothFlag
			},
			// 控制预设弹出层
			clickPresets(){
				this.popupPresetsFlag=!this.popupPresetsFlag
			},
			// 保存
			sava(){
				
			},
			// 重置
			reset(){
				
			},
			// 静音按钮控制
			muteChange(){
				
			},
			// 无线麦克风控制
			wirelessMChange(){
				
			},
			// 触摸开始
			touchStart(event,index,flag) {
			  // 创建动画
			  const animation1 = uni.createAnimation();
			  const animation2 = uni.createAnimation();
			  this.animation = flag==1?animation1:animation2
			  // 放大
			  this.animation.scale(1.5).step({ duration: 100 })
			  // 导出动画
			  if(flag==1){
			  	this.animationData[index] = this.animation.export()
			  }else{
			  	this.soundanimationData[index] = this.animation.export()
			  }
			  // 记录触摸起始点的横坐标
			  this.pointB.X = event.touches[0].clientX;
			  this.pointB.Y = event.touches[0].clientY;
			  this.animationFlag = false
			  this.animationIndex = index
			},
			// 触摸移动
			imageMove(event,index,flag) {
				this.animationIndex = index
				let pointC ={}
				  // 计算滑动距离
				  pointC.X  = event.touches[0].clientX;
				  pointC.Y  = event.touches[0].clientY;
				  let diffX = pointC.X - this.pointB.X
				  let diffY = pointC.Y - this.pointB.Y
				  let angle = Math.atan2(diffY, diffX) * 180 / Math.PI
				  if(flag==1){
					this.adjustList[index].num = angle
				  }else{
					this.soundRegulationList[index].num = angle
				  }
				  console.log(angle,'旋转角度大小')
				  // 旋转
				  this.animation.rotate(angle)
								.step({ duration: 500 }) 
				  if(flag==1){
					this.animationData[index] = this.animation.export()
				  }else{
					this.soundanimationData[index] = this.animation.export()
				  }
				  // this.pointB.X = pointC.X;
				  // this.pointB.Y = pointC.Y;                   //运算结束后将起始点重新赋值为结束点，作为下一次的起始点
				  this.animationFlag = true 
			},
			// 触摸结束
			touchEnd(event,index,flag) {
			    this.animationIndex = index
		        this.pointB.X  = 0
		        this.pointB.Y  = 0
			    this.animation.scale(1.5).step({ duration: 150 })
				this.animation.scale(1).step({ duration: 150 })
				if(flag==1){
					this.animationData[index] = this.animation.export()
				}else{
					this.soundanimationData[index] = this.animation.export()
				}
			},
			seachDevice() {
				if (!this.discovering) {
					this.openBluetoothAdapter();
					if (this.Connecting) {
						this.closeBLEConnect(this.deviceId);
					}
				} else {
					this.Toast("正在扫描中，请等待");
				}
			
			},
			//检查蓝牙打开，初始化蓝牙
			openBluetoothAdapter() {
				uni.openBluetoothAdapter({
					success: (res) => {
						//初始化成功,搜索设备
						setTimeout(() => {
							this.deviceList = []; //每次扫描清空设备列表，不然会导致重复
							this.startBluetoothDeviceDiscovery();
						}, 100);
						//定时关闭搜索设备
						setTimeout(() => {
							this.stopBluetoothDevicesDiscovery();
						}, 15 * 1000);
					},
					fail: err => {
						uni.showToast({
							title: '请确认手机蓝牙是否打开'
						})
					}
				})
			},
			//这里是开启蓝牙搜寻  
			startBluetoothDeviceDiscovery() {
				uni.startBluetoothDevicesDiscovery({
					// services: ["0000FFC0","0000","1000","8000","00805F9B34FB"],
					services: ["0000FFC0"],
					success: (resd) => {
						console.log("打开成功", resd);
					},
					fail: err => {
						console.error("startBluetoothDevicesDiscoveryErr", err);
						this.Toast("请检查蓝牙状态")
					}
				})
			},
			//关闭蓝牙搜索
			stopBluetoothDevicesDiscovery() {
				uni.stopBluetoothDevicesDiscovery({
					success: res => {
			
					}
				})
			},
			//监听连接状态
			onBLEConnectionStateChange() {
				uni.onBLEConnectionStateChange(res => {
					console.log(`设备 ${res.deviceId},connected: ${res.connected}`)
					this.Connecting = res.connected;
					this.deviceId = res.deviceId;
				})
			},
			/*连接低功耗蓝牙设备
			  @params deviceId  蓝牙设备id
			  0	ok	正常
			  10000	not init	未初始化蓝牙适配器
			  10001	not available	当前蓝牙适配器不可用
			  10002	no device	没有找到指定设备
			  10003	connection fail	连接失败
			  10004	no service	没有找到指定服务
			  10005	no characteristic	没有找到指定特征值
			  10006	no connection	当前连接已断开
			  10007	property not support	当前特征值不支持此操作
			  10008	system error	其余所有系统上报的异常
			  10009	system not support	Android 系统特有，系统版本低于 4.3 不支持 BLE
			*/
			createBLEConnection(deviceId) {
				if (this.discovering) {
					this.stopBluetoothDevicesDiscovery()
				}
				if (this.Connecting) {
					this.Toast("设备已连接");
					return
				}
				uni.showLoading({
					title: "连接设备中..."
				})
				uni.createBLEConnection({
					deviceId,
					success: res => {
						uni.hideLoading();
						this.Toast('设备连接成功')
						this.deviceId = deviceId;
						//获取蓝牙服务
						setTimeout(() => {
							this.getBLEDeviceServices(deviceId);
						}, 1500)
			
					},
					fail: err => {
						uni.hideLoading();
						this.Toast('设备连接失败,请检查重试')
						if (err.errCode == -1) {
							this.closeBLEConnect(deviceId)
						}
					}
				})
			},
			/*获取蓝牙设备所有服务(service)。
			  连接蓝牙后调用
			 @parmas deviceId  蓝牙设备id
			*/
			getBLEDeviceServices(deviceId) {
				const _this = this;
				uni.getBLEDeviceServices({
					deviceId,
					success: res => {
						//获取特征值
						console.log(res.services);
						let services = res.services;
						_this.serviceUUID = services[0].uuid;
						this.getBLEDeviceCharacteristics(deviceId, _this.serviceUUID).then(res => {
							console.log(res);
							_this.notifyUUid = res.characteristics[0].uuid
							_this.writeUUid = res.characteristics[1].uuid
							uni.notifyBLECharacteristicValueChange({
								deviceId: deviceId,
								serviceId: _this.serviceUUID,
								characteristicId: _this.notifyUUid,
								state: true,
								success: (res) => {
									console.log("广播开启成功")
									_this.onBLECharacteristicValueChange();
								},
								fail: (err) => {
									console.error(err)
								}
							})
							setTimeout(() => {
								// _this.writeBLECharacteristicValue([0x5A, 0x03, 0xFF])
							}, 2000)
						})
			
			
					},
					fail: err => {
						console.warn("设备服务Error" + err)
					}
				})
			},
			ztandbf() {
				console.log(111);
				this.handlerVal(this.writeBleOriginalValue.concat([1, 3]))
				// this.writeBLECharacteristicValue([0x55, 0xB0, 0x00, 0x01, 0x03, 0x09, 0x01])
			},
			shang() {
				console.log('shang');
				this.handlerVal(this.writeBleOriginalValue.concat([1, 1]))
				// this.writeBLECharacteristicValue([0x55, 0xB0, 0x00, 0x01, 0x01, 0x07, 0x01])
			},
			xia() {
				console.log('xia');
				this.handlerVal(this.writeBleOriginalValue.concat([1, 2]))
				// this.writeBLECharacteristicValue([0x55, 0xB0, 0x00, 0x01, 0x02, 0x08, 0x01])
			},
			dingshi() {
				console.log('dingshi');
				this.handlerVal(this.writeBleOriginalValue.concat([1, 0]))
				// this.writeBLECharacteristicValue([0x55, 0xB0, 0x00, 0x01, 0x00, 0x0C, 0x01])
			},
			handlerVal(val) {
				let count = val.reduce((prev, cur, index, arr) => {
					return prev + cur
				}, 0)
				this.writeBLECharacteristicValue(val.concat([count % 256, count >> 8]))
			},
			/*向蓝牙设备中写入数据
			    @parmas  deviceId 蓝牙设备 id
				@parmas	 serviceId	蓝牙特征值对应服务的 uuid
				@parmas  characteristicId 蓝牙特征值的 uuid
				@parmas	 value	ArrayBuffer	蓝牙设备特征值对应的二进制值
			*/
		   writeBLECharacteristicValue(value) {
		   	console.log(this.writeBleOriginalValue);
		   	console.log(value);
		   	// 向蓝牙设备发送一个0x00的16进制数据
		   	const array = new Uint8Array(value)
		   	// 55 b0 00 03 09 01 29 3b 01
		   	// 55 b0 00 03 09 00 b2 c3 01
		   
		   	// 55 b0 00 03 07 00 08 17 01
		   	console.log(array.buffer);
		   	console.log('deviceId:', this.deviceId)
		   	console.log('serviceId:', this.serviceUUID, )
		   	console.log('characteristicId:', this.writeUUid)
		   	uni.writeBLECharacteristicValue({
		   		deviceId: this.deviceId,
		   		serviceId: this.serviceUUID,
		   		characteristicId: this.writeUUid,
		   		value: array.buffer,
		   		success: res => {
		   			console.log("写入成功", res)
		   			uni.showToast({
		   				icon: 'success',
		   				title: "写入成功"
		   			})
					this.playFlag= !this.playFlag
		   		},
		   		fail: err => {
		   			console.error("写入失败", err)
		   			uni.showToast({
		   				icon: 'error',
		   				title: "写入失败"
		   			})
		   		}
		   	})
		   },
		   formateTime(time) {
		   	const h = parseInt(time / 3600)
		   	const minute = parseInt(time / 60 % 60)
		   	const second = Math.ceil(time % 60)
		   
		   	const hours = h < 10 ? '0' + h : h
		   	const formatSecond = second > 59 ? 59 : second
		   	return `${hours > 0 ? `${hours}:` : ''}${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`
		   },
		   // 监测低功耗蓝牙设备变化
		   onBLECharacteristicValueChange() {
		   	uni.onBLECharacteristicValueChange(res => {
		   		console.log(`监听低功耗蓝牙设备的特征值变化事件 ${res.characteristicId} has changed, now is ${res.value}`)
		   		console.log(this.ab2hex(res.value));
		   		const returnVal = this.ab2hex(res.value)
		   		if (returnVal[3] == 3 && returnVal[4] == 9) {
		   			this.mp3Total = this.formateTime(returnVal[5] * 256 + returnVal[6])
		   		}
		   		if (returnVal[3] == 3 && returnVal[4] == 7) {
		   			this.schedule = this.formateTime(returnVal[5] * 256 + returnVal[6])
		   		}
		   		
		   	})
		   },
		   ab2hex(buffer) {
		   	const hexArr = Array.prototype.map.call(
		   		new Uint8Array(buffer),
		   		function(bit) {
		   			return bit
		   		}
		   	)
		   	return hexArr
		   },
		   /*获取蓝牙设备某个服务中所有特征值(characteristic)。
		     @parmas deviceId 设备id
		     @parmas serviceId 蓝牙服务uuid ，需要使用getBLEDeviceServices 获取
		   */
		   getBLEDeviceCharacteristics(deviceId, serviceId) {
		   	const _this = this;
		   	return new Promise((resolve, reject) => {
		   		uni.getBLEDeviceCharacteristics({
		   			deviceId,
		   			serviceId,
		   			success: res => {
		   				resolve(res);
		   			},
		   			fail: err => {
		   				console.log("获取特征值失败", err)
		   				reject(err);
		   			}
		   		})
		   	})
		   },
		   /*断开蓝牙设备连接
		     @params deviceId
		   */
		   closeBLEConnect(deviceId) {
		   	uni.closeBLEConnection({
		   		deviceId,
		   		success: res => {
		   			this.deviceId = "";
		   			console.log("断开成功", res);
		   		},
		   		fail: err => {
		   			console.error("断开错误", err);
		   		}
		   	})
		   },
		   /*获取蓝牙设备信号强度 @parmas deviceId 设备id */
		   getBLEDeviceRssi(deviceId) {
		   	uni.getBLEDeviceRSSI({
		   		deviceId,
		   		success: res => {
		   			console.log("获取蓝牙设备强度成功", res);
		   		},
		   		fail: err => {
		   			console.error("获取蓝牙强度失败,", err);
		   		}
		   	})
		   },
		   /*读取蓝牙设备特征值的二进制数据
		     @parmas deviceId  蓝牙设备Id
		     @params serviceId  蓝牙特征值 对应服务的uuid
		     @params characteristicId 蓝牙特征值的 uuid
		   */
		   readBLEDeviceData(deviceId, serviceId, characteristicId) {
		   	uni.readBLECharacteristicValue({
		   		deviceId,
		   		serviceId,
		   		characteristicId,
		   		success: res => {
		   			console.log("读取设备值成功", res);
		   		},
		   		fail: err => {
		   			console.error("读取设备值err", err)
		   		}
		   	})
		   },
		   
		  Toast(title) {
		  	uni.showToast({
		  		title,
		  		position: 'bottom',
		  		icon: 'none'
		  	})
		  },
		}
		
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-select{
		height: 29rpx;
		border: 3rpx solid  #0B0B0B;
		border-radius: 10rpx;
		background-color: #292929;
		box-shadow: 0rpx 0rpx 4rpx 1rpx #0E0E0E ,
		            0rpx 0rpx 1rpx 1rpx rgba(14, 14, 14, .9) inset;
	}
	::v-deep .uni-select__input-text{
		color: #fff;
	}
	::v-deep .uni-select__selector-item {
		padding:0 7rpx;
	}
	::v-deep .uni-select__selector-item text{
		font-size: 11rpx;
	}
	::v-deep slider {
		margin: 0;
	}
	.container{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: relative;
		display: flex;
		// padding: 15rpx 30rpx;
		// box-sizing: border-box;
		background: #171717;
		.bigSacle{
			animation:big 0.8s 1 alternate linear forwards ;
			box-shadow: 2rpx 0rpx 5rpx 1rpx rgba(0, 252, 255, .2) ;
		}
		.smallSacle{
			transform: scale(1.4);
			animation:samll 0.8s 1 alternate linear forwards ;
		}
		.rotateO{
			transform: rotate(0deg);
		}
		.rotateOne{
			transform: rotate(90deg);
		}
		.rotateTwo{
			transform: rotate(180deg);
		}
		.rotateThree{
			transform: rotate(270deg);
		}
		.rotateFive{
			transform: rotate(360deg);
		}
        @keyframes  big{
			100% {
				transform: scale(1.4);
			}
		}
		@keyframes  samll{
			0%{
				transform: scale(1.4);
			}
			50%{
				transform: scale(1.2);
			}
			100% {
				transform: scale(1);
			}
		}
		.mask{
			height: 100%;
			width: 100%;
			background: rgba(14, 14, 14, .6);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 900;
		}
		.popup{
			width: 140rpx;
			height: 170rpx;
			border-radius: 15rpx;
			background-color: #fff;
			position: absolute;
			bottom: 13%;
			left: 25rpx;
			z-index: 999;
			.title{
				padding: 10rpx 0 7rpx 0;
				font-weight: bold;
				color: #000;
				text-align: center;
				font-size: 12rpx;
				border-bottom: 1px dashed #999999;
			}
			.songList{
				padding: 0 10rpx;
				font-size: 12rpx;
				height: 135rpx;
				overflow-y: auto;
				view{
					height: 22rpx;
					line-height: 22rpx;
					border-bottom: 1px dashed #999999;
					&:nth-last-of-type(1){
						border-bottom: none;
					}
				}
			}
			
		}
		.popupBluetooth{
			width: 190rpx;
			height: 145rpx;
			border-radius: 15rpx;
			background-color: #fff;
			position: absolute;
			top: 10%;
			left:51%;
			z-index: 999;
			.title{
				padding: 10rpx 0 7rpx 0;
				font-weight: bold;
				color: #000;
				text-align: center;
				font-size: 12rpx;
				border-bottom: 1px dashed #999999;
			}
			.BluetoothList{
				padding: 0 10rpx;
				font-size: 12rpx;
				height: 110rpx;
				overflow-y: auto;
				image{
					width: 14rpx;
					height: 14rpx;
					// border: 1px dashed  #999999;
					margin-right: 10rpx;
				}
				view{
					display: flex;
					align-items: center;
					height: 22rpx;
					line-height: 22rpx;
					border-bottom: 1px dashed #999999;
					&:nth-last-of-type(1){
						border-bottom: none;
					}
				}
				.icon{
					width: 14rpx;
					height: 14rpx;
					border: none;
				}
			}
		}
		.popupPresets{
			width: 110rpx;
			height: 150rpx;
			border-radius: 15rpx;
			background-color: #fff;
			position: absolute;
			bottom: 14%;
			left:59%;
			z-index: 999;
			.title{
				padding: 10rpx 0 7rpx 0;
				font-weight: bold;
				color: #000;
				text-align: center;
				font-size: 12rpx;
				border-bottom: 1px dashed #999999;
			}
			.PresetsList{
				padding: 0 10rpx;
				font-size: 12rpx;
				height: 110rpx;
				overflow-y: auto;
				image{
					width: 14rpx;
					height: 14rpx;
				}
				view{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 22rpx;
					line-height: 22rpx;
					border-bottom: 1px dashed #999999;
					&:nth-last-of-type(1){
						border-bottom: none;
					}
				}
			}
		}
		.left_box{
			width: 79vw;
			height: 100vh;
			padding: 0 15rpx;
			box-sizing: border-box;
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 12%;
				.circle{
					position:relative;
					view{
						width: 4rpx;
						height: 4rpx;
						border-radius: 50%;
						position: absolute;
						top: 7rpx;
						right: 7rpx;
					}
					image{
						width: 29rpx;
						height: 29rpx;
						display: flex;
						align-items: center;
					}
				}
			}
			.middle{
				height: 70%;
				border-radius: 20rpx;
				background-color: #090909;
				.mode{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 15rpx 10rpx 0 10rpx;
					box-sizing: border-box; 
					height: 38%;
					>view{
						// height: 78rpx;
						width: 60rpx;
						color: #fff;
						font-size: 13rpx;
						background: #222222;
						// border: 3rpx solid #00FFFF;
						border-radius: 13rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly; 
						align-items: center;
						font-size: 13rpx;
						box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .3),
						            -1rpx -1rpx 3rpx rgba(85, 85, 85, 0.7);
						image{
							width: 21rpx;
							height: 21rpx;
						}
					}
					
				}
			}
			.adjust{
				height: 56%;
				padding: 15rpx 10rpx 0 10rpx;
				>view:nth-child(1){
					height: 70%;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.list{
						position: relative;
						width: 60rpx;
						height: 80rpx;
						color: #fff;
						.images{
							>view{
								height: 56rpx;
								width: 56rpx;
								border-radius: 50%;
								position: absolute;
								top: 0;
								left: 0;
							}
							image{
								height: 100%;
								width: 100%;
							}
						}
						>view:nth-child(2){
							width: 60rpx;
							position: absolute;
							top: 61rpx;
							font-size: 13rpx;
							text-align: center;
						}
					}
				}
				>view:nth-child(2){
					display: flex;
					justify-content: center;
					height: 20%;
					width: 100%;
					margin: 0 auto;
					>view{
						margin-right: 15rpx;
					}
					button{
						height: 25rpx;
						line-height: 25rpx;
						width: 85rpx;
						font-size: 13rpx;
						color: #fff;
						border-radius: 20rpx;
						background-color: #2D2D2D;
						display: inline-block;
						margin-left: 27rpx;
						box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .3),
						            -1rpx -1rpx 3rpx rgba(85, 85, 85, 0.7);
					}
				}
				>view:nth-child(3){
					height: 10%;
				}
			}
			.slider-container{
				height: 61%;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0rpx 10rpx 0 10rpx;
				color: #fff;
				>view{
					width: 60rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					font-size: 12rpx;
					font-weight: bold;
				}
			}
			.bottom{
				height: 17vh;
				display: flex;
				justify-content: space-between;
				align-items: center;
				>view:nth-child(1){
					height: 26rpx;
					width: 26rpx;
					border-radius: 50%;
					border: 3rpx solid  #0B0B0B;
					background: url(@/static/images/hard_drive.png) no-repeat #2D2D2D;
					background-size: 18rpx 18rpx;
					background-position: center center;
				}
				>view:nth-child(2){
					width: 115rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					image{
						width: 20rpx;
						height: 20rpx;
					}
					>view{
						height: 28rpx;
						width: 28rpx;
						border-radius: 50%;
						border: 3rpx solid  #0B0B0B;
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							display: inline-block;
							margin: auto;
							width: 24rpx;
							height: 24rpx;
						}
					}
				}
				>view:nth-child(3){
					box-sizing: border-box;
					padding: 8rpx 10rpx;
					width: 120rpx;
					height: 34rpx;
					background: #0294FB ;
					border-radius: 7rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #fff;
					>view:nth-child(1){
						font-size: 11rpx;
						>view:nth-child(1){
							font-size: 13rpx;
							font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
						}
						>view:nth-child(2){
							transform: scale(0.85);
						}
					}
					>view:nth-child(2){
						font-weight: bold;
						font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
						font-size: 18rpx;
					}
					image{
						width: 18rpx;
						height:21rpx ;
					}
				}
			}
		}
		.right_box{
			width: 21vw;
			height: 100%;
			display: flex;
			flex-direction: column;
			padding-bottom: 10rpx;
			>view:nth-child(2){
				height: 20%;
				color: #fff;
				font-size: 12rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				flex-direction: column;
				>view{
					height: 20rpx;
					line-height: 20rpx;
					display: flex;
					align-items: center;
				}
			}
			>view:nth-child(1){
				padding: 40rpx 2rpx 0 2rpx;
				box-sizing: border-box;
				height: 80%;
					.list{
						position: relative;
						width: 62rpx;
						height: 57rpx;
						color: #fff;
						.images{
							>view{
								height: 43rpx;
								width: 43rpx;
							}
							>view:nth-child(1){
								position: absolute;
								top:0;
								left: 0;
							}
							>view:nth-child(2){
								position: absolute;
								top: 0;
								left: 0;
							}
							image{
								height: 100%;
								width: 100%;
							}
						}
						>view:nth-child(2){
							width: 60rpx;
							font-size: 13rpx;
							text-align: center;
							position: absolute;
							top: 13rpx;
							left: 60rpx;
						}
					}
				}
		}
	}
</style>
